<template>
	<view class="jf-view">
		<view class="jf-heard position-relative w-100 u-m-b-28 w-s-color-f">
			<image src="../static/vip/7.png" class="w-100 h-100" mode=""></image>
			<view class="position-absolute top-0 left-0 w-100 h-100">
				<view class="row row-end">
					<view class="dh-btn flex-center bg-primary u-f-24" @click="dhShow=true">积分兑换</view>
				</view>
				<view class="u-p-l-44">
					<view class="u-f-32 u-m-b-32">当前积分</view>
					<view class="u-f-40 font-weight-550">{{num}}</view>
				</view>
			</view>
		</view>
		<view class="u-f-32 font-weight-550 u-p-b-8">积分明细</view>
		<view class="mx-item bg-f u-bdr-12 u-m-t-20 u-p-l-24 u-p-r-36 space-between" v-for="(item,index) in list"
			:key="index">
			<view class="column h-100 space-evenly">
				<view class="u-f-28">{{item.content}}</view>
				<view class="w-s-color-9 u-f-22">{{item.createTime}}</view>
			</view>
			<view class="u-f-32 font-weight-550">{{item.type==1?'+':'-'}}{{item.num}}</view>
		</view>
		<u-loadmore v-if="list.length>0" :status="status" />
		<empty :isShow="true" title="暂无明细" v-if="list.length == 0" />
		<u-popup v-model="dhShow" mode="center" border-radius="12">
			<view class="dh-view">
				<view class="text-center u-f-32 u-m-b-40">积分兑换</view>
				<view class="row u-m-b-24">
					<view class="u-f-28 u-m-r-18">数量:</view>
					<view class="dh-fill u-bdr-12 bg-f u-flex-1 u-p-l-22">
						<input type="number" v-model="jfNum" placeholder="请输入兑换数量"
							placeholder-class="w-s-color-9 u-f-26" class="w-100 h-100" />
					</view>
				</view>
				<view class="w-s-color-9 u-f-24 u-m-b-8">兑换说明：</view>
				<view class="w-s-color-9 u-f-20 u-m-b-12">1.积分兑换，属于虚拟商品，一经购买不予退换</view>
				<view class="w-s-color-9 u-f-20 u-m-b-34">2.{{bili}}:1兑换，最少{{bili}}积分</view>
				<view class="flex-center">
					<button class="w-s-color-f u-f-32 bg-primary flex-center u-bdr-44 btn-sub" @click="userIntegral"
						:disabled="disabled" :loading="disabled">{{disabled ?'兑换中' :'立即兑换'}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				num: 0,
				list: [],
				status: 'loadmore',
				page: 1,
				limit: 10,
				pages: 1,
				refresherTriggered: true,
				dhShow: false,
				bili: 0,
				jfNum: '',
				disabled: false
			};
		},
		onShow() {
			this.scrolltoupper()
		},
		onPullDownRefresh() {
			this.scrolltoupper()
		},
		onReachBottom() {
			if (this.page < this.pages) {
				this.status = 'loading'
				this.page += 1
				this.getList()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			//兑换积分
			userIntegral() {
				if (!this.jfNum) {
					uni.showToast({
						title: '请输入兑换的积分数量',
						icon: 'none'
					})
					return
				}
				if (Number(this.jfNum) < Number(this.bili)) {
					uni.showToast({
						title: '兑换的积分数量不能小于' + this.bili + '积分',
						icon: 'none'
					})
					return
				}
				this.disabled=true
				let data = {
					integral: this.jfNum
				}
				this.$Request.postT('/app/integral/creditsExchange', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '积分兑换成功'
						})
						this.dhShow=false
						this.scrolltoupper()
						this.jfNum = ''
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
					this.disabled=false
				})
			},
			//获取积分兑换比例
			getBili() {
				this.$u.get('/app/common/type/104').then(res => { // 积分兑换比例 104
					if (res.code == 0 && res.data) {
						this.bili = res.data.value
					}
				});
			},
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			},
			//上拉刷新
			scrolltoupper() {
				this.getNum()
				this.getBili()
				this.page = 1
				this.refresherTriggered = true
				this.getList()
			},
			//获取积分明细
			getList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.getT('/app/integral/details', data).then(res => {
					setTimeout(() => {
						this.refresherTriggered = false
					}, 1500)
					if (res.code == 0) {
						this.pages = res.data.pages
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							this.list = [...this.list, ...res.data.records]
						}
						uni.stopPullDownRefresh();
					}
				})
			},
			//获取当前积分
			getNum() {
				this.$Request.getT('/app/integral/selectByUserId').then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						this.num = res.data.integralNum
					} else {
						this.num = 0
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F5F9;
	}

	.jf-view {
		width: 100vw;
		min-height: 100vh;
		padding: 20rpx 32rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.jf-heard {
			height: 218rpx;

			.dh-btn {
				width: 144rpx;
				height: 46rpx;
				border-radius: 24rpx 22rpx 0rpx 24rpx;
			}
		}

		.mx-item {
			height: 140rpx;
		}

		.dh-view {
			width: 590rpx;
			padding: 40rpx 52rpx;

			.dh-fill {
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				height: 58rpx;
			}

			.btn-sub {
				width: 348rpx;
				height: 64rpx;
			}
		}
	}
</style>